<template>
<div>
    <el-dialog title="更改数据" :visible.sync="dialogForm2Visible">
      <el-form :model="form2">
        <el-form-item label="型号" :label-width="formLabelWidth">
          <el-input
            v-model="form2.name"
            autocomplete="off"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input
            v-model="form2.price"
            autocomplete="off"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="出厂日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form2.date"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="配置" :label-width="formLabelWidth">
          <el-input v-model="form2.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false">取 消</el-button>
        <el-button type="primary" @click="genggai11(),dialogForm2Visible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div
      style="
        width: 70%;
        height: 50px;
        margin-left: 56px;
        display: flex;
        justify-content: space-between;
      "
    >
      <label for=""
        ><input
          type="text"
          style="width: 120px; height: 20px"
          placeholder="请输入"
          v-model="shousiozhi"
        />
        <button
          style="
            color: #fff;
            width: 60px;
            height: 30px;
            background-color: #409eff;
            border: none;
            border-radius: 5px;
          "
          @click="shousio()"
        >
          搜索
        </button>
      </label>
    </div>
    <div style="width: 1200px">
    <table
        border="1"
        cellspacing="0"
        style="
          margin: auto;
          width: 90%;
          text-align: center;
          background-color: #e7e1e1;
        "
      >
        <thead>
          <tr>
            <th >型号</th>
            <th>出厂日期</th>
            <th>价格</th>
            <th>配置</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in arr" :key="index"  style="background-color: beige;">
            <td>{{ item.name }}</td>
            <td>{{ item.date }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.desc }}</td>
            <td>
              <el-button type="text" @click="genggai(item.id),dialogForm2Visible=true">编辑</el-button>
              <el-button type="text" style="color: red;" @click="open(item.id)">删除</el-button>
            </td>
          </tr>
        </thead>
      </table>
      <div
        style="
          width: 89.9%;
          height: 29px;
          outline: 1px solid #000;
          margin: auto;
          background-color: #e7e1e1;
        "
      >
        <fenyeqi
          :arr="arr.length"
          :arr2="arr2.length"
          :hangshu="this.hangshu"
          @shu="ck"
          style="float: right"
        ><p>一共 {{arr1.length}}条信息</p></fenyeqi>
      </div>
    </div>
  </div>
</template>
<script>

import fenyeqi from "./fenyeqi.vue";
export default {
  components: { fenyeqi },
  data() {
    return {
      currentPage1: 5,
      arrrc:[],
      count: 1,
      arr2: "", //更改的数据
      arr: [], //页面数据
      arr1: [], //总数据
      hangshu: 10,
      shousiozhi: "",
      id:99,
      dialogForm2Visible:false,
      form2: {
        name:"",
        price:"",
        date: "",
        id:'',      
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",
      val:0
    };
  },
created(){
//   axios.get("https://7nvr3rh17g.hk.aircode.run/hxl").then((response) => {
//     //  console.log(response.data.result.shop);
//     this.$store.state.arrccc=response.data.result.shop
// });
      this.arr1=this.$store.state.arrccc
      this.arr2 = this.arr1;
      this.arr = this.arr1.slice(0, this.hangshu);
      this.$store.commit('akk2',this.arr1)
},
watch: {
    arr1: {
        handler() {
          this.arr = this.arr1.slice(this.val*this.hangshu,this.val* this.hangshu+this.hangshu);
        },
        immediate: true, //一进入页面就执行handler里的代码
        deep: true,
      },
    
  },
  computed: {},
  methods: {
    open(item) {
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          
          this.shanchu(item); // 在删除成功时调用shanchu方法
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    ck(val) {
      this.val=val-1
      this.arr = this.arr2.slice(
      this.val* this.hangshu,
      this.val* this.hangshu + this.hangshu
      );
    },
    shousio() {
      this.arr2 = this.arr1.filter((item) => {
        return item.name.includes(this.shousiozhi);
      });
      this.arr = this.arr2.slice(0, this.hangshu);
    },
    shanchu(e){
    this.arr1=this.arr1.filter((item) => item.id != e)
    this.arr2 = this.arr1
    this.$store.commit('akk2',this.arr1)
    this.arr = this.arr2.slice(this.val*this.hangshu,this.val* this.hangshu+this.hangshu);
    // console.log(e);
    },
    genggai(e){
      let shu1=this.arr1.filter((item) => item.id == e)
      this.form2.name=shu1[0].name
      this.form2.price= shu1[0].price,
      this.form2.date=shu1[0].date,
      this.form2.desc=shu1[0].desc,
      this.form2.id=shu1[0].id
      this.arrrc=shu1

      },
      
      genggai11(){
      const date = new Date(this.form2.date);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.form2.date = `${year}-${month}-${day}`;
      this.arr1=this.arr1.filter((item) => item.id != this.arrrc[0].id)
        let shu={
        name:this.form2.name,
        price: this.form2.price,
        date: this.form2.date,
        desc:this.form2.desc,
        id:this.form2.id,
        img:this.arrrc[0].img
        
      }
      this.arr1.unshift(shu)
      this.arr2=this.arr1
      this.$store.commit('akk2',this.arr1)
      }

  },
  
};
</script>
<style lang='less' scoped>
td,
th {
  border-top: 1px solid #e7e1e1;
  border-bottom: 1px solid #000;
  border-left: 0;
  border-right: 0;
}
</style>
